<template>
  <view class="wrap">
    <view class="top"></view>
    <view class="content">
      <view class="title">欢迎登录</view>
      <view class="u-border-bottom">
        <u-input type="number" v-model="phone" placeholder="请输入手机号" :maxlength="11" />
      </view>
      <view class="u-border-bottom">
        <u-input
          type="password"
          :password-icon="passwordIcon"
          v-model="password"
          placeholder="请输入密码"
          :maxlength="20"
        />
      </view>
      <button @tap="submit" :style="[inputStyle]" class="getCaptcha u-m-t-40">登录</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      passwordIcon: true,
      phone: '',
      password: '',
      clientId: null,
      fastView: false,
      userPhone: ''
    }
  },
  async onLoad() {},
  computed: {
    inputStyle() {
      let style = {}
      if (this.$u.test.mobile(this.phone) && this.password) {
        style.color = '#fff'
        style.backgroundColor = this.$u.color['success']
      }
      return style
    }
  },
  methods: {
    async submit() {
      if (!this.$u.test.mobile(this.phone) || !this.password) return

      // 处理登录的参数
      const params = {
        username: this.phone,
        password: this.password,
        clientId: this.clientId
      }
      // 请求API 登录
      const loginRes = await this.$u.api.authLogin(params)

      // 缓存token
      this.$u.vuex('vuex_token', loginRes.data.token)

      // 请求用户信息
      const userInfo = await this.$u.api.userInfo()
      // 缓存用户信息
      this.$u.vuex('vuex_user', userInfo)
      this.$u.toast('登录成功')
      // 跳转到首页
      setTimeout(() => {
        this.$u.route({
          type: 'reLaunch',
          url: 'pages/index/index'
        })
      }, 1500)
    }
  }
}
</script>

<style lang="scss" scoped>
.u-border-bottom {
  margin-top: 40rpx !important;
}

.wrap {
  font-size: 28rpx;
  .content {
    width: 600rpx;
    margin: 80rpx auto 0;

    .title {
      text-align: left;
      font-size: 60rpx;
      font-weight: 500;
      margin-bottom: 100rpx;
    }
    input {
      text-align: left;
      margin-bottom: 10rpx;
      padding-bottom: 6rpx;
    }
    .tips {
      color: $u-type-info;
      margin-bottom: 60rpx;
      margin-top: 8rpx;
    }
    .getCaptcha {
      background-color: #dbf1e1;
      color: $u-tips-color;
      border: none;
      font-size: 30rpx;
      padding: 12rpx 0;

      &::after {
        border: none;
      }
    }
    .getFast {
      background-color: #ffbb24;
      color: #fff;
      border: none;
      font-size: 30rpx;
      padding: 12rpx 0;

      &::after {
        border: none;
      }
    }
    .alternative {
      color: $u-tips-color;
      display: flex;
      justify-content: space-between;
      margin-top: 30rpx;
    }
  }
  .buttom {
    .loginType {
      display: flex;
      padding: 350rpx 150rpx 150rpx 150rpx;
      justify-content: space-between;

      .item {
        display: flex;
        flex-direction: column;
        align-items: center;
        color: $u-content-color;
        font-size: 28rpx;
      }
    }

    .hint {
      padding: 20rpx 40rpx;
      font-size: 20rpx;
      color: $u-tips-color;

      .link {
        color: $u-type-warning;
      }
    }
  }
}
</style>
